import {useState} from "react";
import {SearchBar, Toast} from "antd-mobile";
import {useNav} from "@/hooks";
import {routePath} from "@/router";
import {Container, Icon} from "@/components/public";
import PlatformTabs from "@/components/PlatformTabs";
import "./search.less";

function Search() {
    const {handleNav} = useNav();
    const [title, setTitle] = useState("");

    const handleSearch = () => {
        if (!title) {
            Toast.show({content: "请输入商品标题"});
        } else {
            handleNav(routePath.searchGoods, {title});
        }
    };
    const handleBack = () => {};

    return (
        <Container
            onBack={handleBack}
            className="search-page"
            backArrow={<Icon className="icon-left" />}
            right={
                <div className="search-title" onClick={handleSearch}>
                    搜索
                </div>
            }
            title={
                <SearchBar
                    icon=""
                    clearable
                    onChange={setTitle}
                    className="search-bar"
                    placeholder="请输入商品名称或粘贴宝贝标题"
                />
            }
            bottom={<PlatformTabs className="tabs" />}
        />
    );
}

export default Search;
